import React from 'react';
// 引入封装好的页头组件
import Pageheader from '@/components/Pageheader';
import { Table, Tag, Input } from 'antd';
import { useEffect, useState } from 'react';
// 影院信息接口
import { cinemaData } from '@/api/cinema'
// 引入分页组件
import Mypagniation from '@/components/Mypagniation';
const { Search } = Input;
const Index = () => {
    // 定义表格列
    const columns = [
        {
            title: '序号',
            // 表示该列对应数据的那个字段
            dataIndex: 'id',
            // 唯一索引
            key: 'id',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '电影院',
            dataIndex: 'name',
            key: 'id',
        },
        {
            title: '所在城市',
            dataIndex: 'city_name',
            key: 'id',
        },
        {
            title: '所在区',
            dataIndex: 'district_name',
            key: 'id',
        },
        {
            title: '具体地址',
            dataIndex: 'address',
            key: 'id',
        },
        {
            title: '状态',
            key: 'id',
            dataIndex: 'status',
            render: (tags) => {
                return <Tag color={tags == 1 ? 'success' : 'error'}>
                    {tags == 1 ? '正常' : '禁用'}
                </Tag>
            }
        }
    ];
    // 搜索事件
    const onSearch = (value) => {
        setkeyword(value)
        getCinemaFn({
            keyword,
            page
        })
    };
    // 定义数据
    let [page, setPage] = useState(1)
    let [cinemalist, setcinemalist] = useState([])
    let [keyword,setkeyword] = useState()
    // 总影院数
    let [total, setTotal] = useState(0)
    // 获取影院信息
    let getCinemaFn = (data) => {
        cinemaData(data).then(res => {
            // console.log(res);
            if (res.data.errNo == 0) {
                // 用户列表赋值
                setcinemalist(res.data.paginate.data)
                // 总用户数赋值
                setTotal(res.data.paginate.total)
            }
        })
    }
    // 初始化请求影院列表
    useEffect(() => {
        getCinemaFn({
            keyword,
            page
        })
    }, [page])
    return (
        <div>
            {/* 页头 */}
            <Pageheader title='电影列表'>
                <Search
                    placeholder="请输入影院名"
                    onSearch={onSearch}
                    enterButton
                    style={{ width: 304 }} />
            </Pageheader>
            {/* 展示表格 */}
            <Table
                columns={columns}
                dataSource={cinemalist}
                rowKey={(record) => record.id}
                pagination={false}
            />
            {/* 分页 */}
            <Mypagniation page={page} total={total} setPage={setPage}></Mypagniation>
        </div>
    );
}

export default Index;
